<template>
  <!-- 历史记录 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="logNo"
      :tool-button="false"
      :pagination="false"
      :height="list.length == 0 ? 200 : list.length < 10 ? '' : 400"
    >
      <template #logDetails="scope">
        <div v-html="scope.row.logDetails"></div>
      </template>
    </ProTable>
  </div>
</template>
<script setup lang="ts" name="HistoricalRecordsBox">
import { ref, reactive, watch } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { findAllHistoryRecordByClient } from "@/api/modules/common";

const props = defineProps({
  eno: Number || String,
  eventType: String
});

const columns = reactive([
  { prop: "step", label: "步骤", width: 120, align: "left" },
  { prop: "logTitle", label: "动作", width: 180, align: "left" },
  { prop: "logDetails", label: "备注", align: "left" },
  { prop: "operator", label: "操作者", width: 180, align: "left" },
  { prop: "createdTime", label: "操作时间", width: 180, align: "left" }
]);

const list = ref<any[]>([]);
const loading = ref(true);

const getList = () => {
  if (props.eno) {
    findAllHistoryRecordByClient({
      "hisotryRecordDto.eno": props.eno,
      "hisotryRecordDto.eventType": props.eventType
    })
      .then((res: any) => {
        res.forEach((item: any, index: number) => {
          item.step = "步骤" + (res.length - index);
        });
        list.value = res;
        loading.value = false;
      })
      .catch(() => {
        loading.value = false;
      });
  } else {
    list.value = [];
  }
};

getList();

watch(
  () => props.eno,
  val => {
    getList();
  }
);
</script>

<style scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
